<template>

	<el-container class="home-container">
		<!-- 侧边栏 -->
	  <el-aside width="auto">
	  		  <common-aside :title="asideTitle"></common-aside>
	  </el-aside>
	  <el-container>
		  <!-- 头部区域 -->
	    <el-header>
			<CommonHeader @onMenu="onMenu"></CommonHeader>
		</el-header>
		<!-- 右侧主题内容 -->
	    <el-main>
			<router-view></router-view>
		</el-main>
	  </el-container>
	</el-container>
</template>

<script>
	import CommonHeader from './components/CommonHeader.vue'
	import CommonAside from './components/CommonAside.vue'
	export default{
		data(){
			return{
				asideTitle:'个人网站后台管理系统'
			}
		},
		components:{
			CommonHeader,
			CommonAside
		},
		methods:{
			onMenu() {
				this.asideTitle = this.asideTitle == '个人网站后台管理系统' ? '后台' : '个人网站后台管理系统' 
				this.$nextTick(()=>{
					this.$store.commit('collapseMenu')
				})
				
			}
		}
	}
</script>

<style lang="less" scoped="scoped">
	.home-container{
		height: 100%;
	}
	.el-header{
		background-color: #373d41;
	}
	.el-aside{
		background-color: #333744;
	}
	.el-main{
		background-color: #eaedf1;
	}
	
</style>
